<!--
 * @Author: Lu junwen
 * @Date: 2022-03-13 18:14:37
 * @LastEditors: Lu junwen
 * @LastEditTime: 2022-04-06 16:33:54
 * @FilePath: \vue-shop-app-customer\src\views\Manager.vue
-->
<template>
  <div class="manager">
    <!-- 千万不要丢掉 -->
    <router-view></router-view>
    <!-- 用于接受管理页面，首页，订单页，我的页面 -->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="/manager/home">首页</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/manager/cart">
        购物车
        <i v-show="content != 0">{{content}}</i>
      </van-tabbar-item>
      <van-tabbar-item icon="orders-o" to="/manager/order">订单</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/manager/mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { mapActions, mapState, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      active: 0,
      content: 0,
    };
  },
  computed: {
    ...mapState("order", ["orderGoods"]),
  },
  watch: {
    orderGoods: {
      handler(newVal) {
        this.content = newVal.length
      },
      immediate: true
    }
  }
};
</script>

<style scoped>
i {
  position: absolute;
  display: inline-block;
  color: #fff;
  background-color: red;
  padding: 2px 5px;
  border-radius: 10px;
  bottom: 30px;
  left: 170px;
}
</style>